<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<span><input style="width: 75%; height: 100%;display: block" type="file" name="myfile" onchange="uploadVidoe(this)"/>
</span>
<video id="video" width="60%" height="45%" src=""></video>
</body>

<script>

    function uploadVidoe(vidoe) {
        var fileObj = vidoe.files[0]; // 获取文件对象

        if (fileObj != undefined) {

            if (fileObj.name) {
                console.log(fileObj.name)
            } else {
                alert("请选择文件");
            }

            var size = fileObj.size;
            var type = fileObj.type;

            //校验格式
            if (type.indexOf('mp4') == -1) {
                alert("请上传MP4格式")
                return false;
            }
            //校验大小
            if (size / 1024 / 2014 > 10) {
                alert("请上传" + size + "之内的视频")
                return false;
            }

            var form = new FormData(); // FormData 对象
            form.append("file", fileObj);
            $.ajax({
                url: "/yoga/mv/upload",
                contentType: false,//false 传输对象
                processData: false,
                type: "POST",
                data: form,
                success: function (ret) {
                    if(ret.resCode != undefined){
                        if(ret.resCode == '1'){
                           $("#video").attr("src",'/yoga/'+ret.webShowPath);
                        }
                        else if(ret.resCode == '0'){
                            alert("上传失败")
                        }
                    }
                }
            })

        }
    }

</script>

</html>
